<template>
    <div id="physical-info">
        <el-breadcrumb separator="/" class="common-bread">
            <el-breadcrumb-item :to="{ path: '/physicalTest' }">体测管理</el-breadcrumb-item>
            <el-breadcrumb-item>体测信息</el-breadcrumb-item>
            <span class="phy-standard fr" @click="checkStandard()">体测标准</span>
        </el-breadcrumb>

        <div class="contentBox">
            <div class="list_head">
                <span class="phy-setting">{{physicalName}}</span>
                <span class="testdes">日期：{{phyStartTime}} - {{phyEndTime}}</span>
                <span class="testdes">参与学校：{{totalCount}}所</span>
                <span class="testdes">参与学生：{{peopleCount}}人（男：{{maleCount}}人，女：{{femaleCount}}人）</span>
                <el-button class="list_btn" type="primary" @click="cancle">返回</el-button>
            </div>
            <div class="list-con">
                <div class="list_head" style="text-align:right;">
                    <el-button type="primary" @click="addOrEditPhySchool()" icon="el-icon-circle-plus-outline">添加体测学校</el-button>
                </div>
                <el-table :data="dataList" :highlight-current-row="true">
                    <el-table-column type="index" label="序号"></el-table-column>
                    <el-table-column prop="schoolName" label="学校名称"></el-table-column>
                    <el-table-column label="体测时间" min-width="120" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span v-if="scope.row.startTime">{{scope.row.startTime}} -- {{scope.row.endTime}}</span>
                            <el-button v-else class="write-btn" type="text" @click="addPhysicalTime(scope.row)">填写</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stuTotalCount" label="学生数量"></el-table-column>
                    <el-table-column prop="stuBoy" label="男生数量"></el-table-column>
                    <el-table-column prop="stuGirl" label="女生数量"></el-table-column>
                    <el-table-column width="150" align="right">
                        <template slot-scope="scope">
                            <i class="el-icon-edit blueIcon" @click="addOrEditPhySchool(scope.row)" title="编辑"></i>
                            <i class="el-icon-delete redIcon" @click="delPhySchool(scope.row)" title="删除"></i>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination v-show="totalCount > 0" layout="prev, pager, next, jumper" :page-size="pageSize" :current-page="pageNum" :total="totalCount"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </div>

        <el-dialog class="my-dialog" :title="title" :visible.sync="nameDialogVisible" width="600px">
            <el-form :inline-message="true" label-position="right" label-width="200px">
                <el-form-item v-if="nameOrTime" label="省市：" prop="areaId">
                    <el-select v-model="areaId" @change="getZones">
                        <el-option v-for="item in cities" :label='item.areaName' :value='item.areaId' :key="item.areaId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="nameOrTime" label="县区：" prop="zoneId">
                    <el-select v-model="zoneId">
                        <el-option v-for="item in zones" :label='item.zoneName' :value='item.zoneId' :key="item.zoneId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="nameOrTime" label="学校：" required>
                    <el-form-item prop="schoolId">
                        <el-select v-model="schoolId">
                            <el-option v-for="item in schoolList" :label='item.schoolName' :value='item.schoolId' :key="item.schoolId"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form-item>
                <el-form-item v-if="!nameOrTime" :label="schoolName"></el-form-item>
                <el-form-item label="开始时间：" required>
                    <el-form-item prop="startTime" class="time">
                        <el-date-picker v-model="startTime" format="yyyy/MM/dd" placeholder="yyyy/MM/dd" :default-value="phyStartTime" :picker-options="myPickerOptions"></el-date-picker>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="结束时间：" required>
                    <el-form-item prop="endTime" class="time">
                        <el-date-picker v-model="endTime" format="yyyy/MM/dd" placeholder="yyyy/MM/dd" :default-value="phyStartTime" :picker-options="myPickerOptions"></el-date-picker>
                    </el-form-item>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="nameDialogVisible = false">取 消</el-button>
                <el-button v-if="nameOrTime" type="primary" @click="save(1)">确 定</el-button>
                <el-button v-if="!nameOrTime" type="primary" @click="save(2)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                isClick: false,
                physicalId: this.$util.getUrlParam('physicalId') || '',
                nameDialogVisible: false, // 学校名称
                nameOrTime: true, // true:name(添加编辑学校)；false:time(填写时间)
                title: "添加体测学校",
                physicalName: this.$util.getUrlParam('physicalName') || '',
                phyStartTime: "",
                phyEndTime: "",
                peopleCount: "0",
                maleCount: "0",
                femaleCount: "0",
                dataList: [],
                totalCount: 0,
                pageNum: 1,
                pageSize: 10,
                testSchool: {},
                schoolType: '0',
                areaId: '',
                cities: [],
                zoneId: '',
                zones: [],
                street: '',
                schoolId: '',
                schoolName: '',
                schoolList: [],
                startTime: '',
                endTime: '',
                timeRules: {},
                configId: 0,
                myPickerOptions: {
                    disabledDate: (time) => {
                        // 如果函数处理比较简单,可以直接在这里写逻辑方法
                        // return time.getTime() < Date.now() - 8.64e7

                        // 如果函数里处理的数据比较麻烦,也可以单独放在一个函数里,避免data数据太臃肿
                        return this.dealDisabledDate(time)
                    }
                },
            }
        },
        watch: {
            zoneId() {
                if (this.zoneId) {
                    this.getSchoolList(this.zoneId);
                }
            }
        },
        mounted() {
            this.getPhySchoolList();
            this.getCities();
        },
        methods: {
            dealDisabledDate(time) {
                // return的值,true是不可以操作选择,false可以操作选择,比如下面这个判断就只能选择今天之后的时间
                let start = (new Date(this.phyStartTime)).getTime();
                let end = (new Date(this.phyEndTime)).getTime();
                return time.getTime() < start || time.getTime() > end;

                // 这里减8.64e7的作用是,让今天的日期可以选择,如果不减的话,今天的日期就不可以选择,判断中写<= 也是没用的,一天的毫秒数就是8.64e7
                // return time.getTime() < Date.now() - 8.64e7
            },
            //获取列表数据
            getPhySchoolList() {
                this.dataList = [];
                let url = "/jlp/physical/schoollist";

                this.$axios.post(url, {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    physicalId: this.physicalId * 1
                }).then(response => {
                    if (response.data.error == 10000) {
                        let preData = response.data.data;
                        if (preData) {
                            this.phyStartTime = preData.startTime > 0 ? new Date(preData.startTime * 1).format("yyyy/MM/dd") : '';
                            this.phyEndTime = preData.endTime > 0 ? new Date(preData.endTime * 1).format("yyyy/MM/dd") : '';
                            this.totalCount = preData.schoolCount;
                            this.peopleCount = preData.peopleCount;
                            this.maleCount = preData.maleCount;
                            this.femaleCount = preData.femaleCount;

                            let arrlist = preData.schools;
                            if (arrlist && arrlist.length > 0) {
                                for (let i = 0; i < arrlist.length; i++) {
                                    let configId = arrlist[i].configId,
                                        schoolId = arrlist[i].schoolId,
                                        schoolName = arrlist[i].name,
                                        startTime = arrlist[i].startTime,
                                        endTime = arrlist[i].endTime,
                                        stuTotalCount = arrlist[i].peopleCount,
                                        stuBoy = arrlist[i].maleCount,
                                        stuGirl = arrlist[i].femaleCount;
                                    startTime = startTime > 0 ? new Date(startTime * 1).format("yyyy/MM/dd") : '';
                                    endTime = endTime > 0 ? new Date(endTime * 1).format("yyyy/MM/dd") : '';
                                    this.dataList.push({ configId, schoolId, schoolName, startTime, endTime, stuTotalCount, stuBoy, stuGirl });
                                }
                            }
                        }
                    }
                });
            },
            // 新增、编辑体测学校
            addOrEditPhySchool(row) {
                this.nameOrTime = true;
                if (row) {
                    this.title = '编辑体测学校';
                    this.configId = row.configId;
                    this.schoolId = row.schoolId;
                    this.areaId = '';
                    this.zoneId = '';
                    this.zones = [];
                    this.startTime = row.startTime > 0 ? new Date(row.startTime).format("yyyy/MM/dd") : '';
                    this.endTime = row.endTime > 0 ? new Date(row.endTime).format("yyyy/MM/dd") : '';
                    this.schoolList = [
                        { schoolId: row.schoolId, schoolName: row.schoolName }
                    ]
                } else {
                    this.title = '新增体测学校';
                    this.configId = 0;
                    this.areaId = '';
                    this.zoneId = '';
                    this.zones = [];
                    this.schoolId = '';
                    this.schoolList = [];
                    this.startTime = '';
                    this.endTime = '';
                }
                this.nameDialogVisible = true;
            },
            // 删除体测学校
            delPhySchool(row) {

                this.$confirm("您确定要删除该体测学校吗？", "温馨提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消"
                }).then(() => {
                    this.$axios.post('/jlp/physical/school/delete', {
                        configId: parseInt(row.configId)
                    }).then(response => {
                        if (response.data.error == 10000) {
                            this.$util.successMsg("删除成功");
                            this.getPhySchoolList()
                            // 
                        } else {
                            this.$util.errorMsg(response.data.message);
                        }
                    });
                }).catch(() => { });
            },
            // 添加时间
            addPhysicalTime(row) {
                this.nameOrTime = false;
                this.title = '体测时间';
                this.startTime = '';
                this.endTime = '';
                this.configId = row.configId;
                this.schoolId = row.schoolId;
                this.schoolName = row.schoolName;
                this.nameDialogVisible = true;
            },
            //获取城市列表
            getCities() {
                this.$util.getCities().then(cities => {
                    this.cities = cities;
                })
            },
            //获取区县列表
            getZones() {
                this.zones = [];
                this.$util.getZones(this.areaId).then(zones => {
                    zones.forEach(item => {
                        this.zones.push({
                            zoneId: item.areaId,
                            zoneName: item.areaName
                        })
                    })
                    this.zoneId = this.zones[0].zoneId;
                })
            },
            getSchoolList(areaId) {
                this.schoolList = [];
                this.$util.getSchools(areaId).then(schools => {
                    schools.forEach(item => {
                        this.schoolList.push({
                            schoolName: item.name,
                            schoolId: item.schoolId,
                        })
                    });
                    this.schoolId = this.schoolList[0].schoolId || '';
                })
            },
            // 保存
            save(type) {
                if (this.isClick) {
                    return;
                }
                this.isClick = true;

                let start = new Date(this.startTime).getTime() || 0;
                let end = new Date(this.endTime).getTime() || 0;
                if (type == 1 && !this.schoolId) {
                    // 体测学校
                    this.isClick = false;
                    return this.$util.errorMsg('请选择体测学校');
                }

                // 体测时间
                if (!start || !end) {
                    this.isClick = false;
                    return this.$util.errorMsg('请选择体测时间');
                }
                if (start > end) {
                    this.isClick = false;
                    return this.$util.errorMsg('开始时间不能大于结束时间');
                }

                this.$axios.post('/jlp/physical/school/update', {
                    physicalId: this.physicalId * 1,
                    startTime: start,
                    endTime: end,
                    schoolId: this.schoolId,
                    configId: this.configId * 1
                }).then(response => {
                    if (response.data.error == 10000) {
                        this.$util.successMsg("保存成功");
                        this.nameDialogVisible = false;
                        this.isClick = false;
                        this.getPhySchoolList();
                    } else {
                        this.isClick = false;
                        this.$util.errorMsg(response.data.message);
                    }
                }).catch(()=>{
                    this.isClick = false;
                });
            },
            checkStandard() {
                location.href = '/#/physicalStandard'
            },
            cancle() {
                location.href = '/#/physicalTest'
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                this.getPhySchoolList();
            }
        }
    }
</script>
<style scoped>
    .testdes {
        font-size: 14px;
        padding-left: 15px;
        color: #666;
    }

    .phy-setting {
        color: #0398ff;
        cursor: pointer;
    }

    .write-btn {
        padding: 5px 20px;
        background-color: #666666;
        color: #fff;
    }

    .my-dialog {
        margin-top: 75px;
    }
</style>